<template>
  <div class="chart-container">
    <CommonChart 
      class="chart-container-content"
      ref="commonChartRef"
      height="400px"
      width="400px"
      :fullOptions="{
        options: option
      }"
      :loading="false"
      :id="`scatter-chart`"
    />
</div>
</template>
<script setup lang="ts">
import CommonChart from '@/components/echarts/index.vue'
import { onMounted, ref } from 'vue'
const props = defineProps({
  data: {
    type: Array,
    default: () => []
  }
}) as {
  data: Array<any>
}
let option = {
  xAxis: {
    min: 40,
    max: 120
  },
  yAxis: {
    min: 80,
    max: 200
  },
  grid: {
    top: '20', right:'0'
  },
  series: [
    {
      symbolSize: 8,
      data: props.data,
      type: 'scatter',
      emphasis: {
        label:{
          // show: true
        },
        itemStyle: {
          color: '#fff',
          borderColor: 'red',
          borderWidth: 2
        }
      },
      markArea: {
        emphasis: {
          disabled: true
        },
        data: [
          [{yAxis: '200', xAxis: '0',itemStyle: {color: 'rgb(191 73 81)'}},
            {yAxis:'0',xAxis: '120'}
          ],
          [{yAxis: '180', xAxis: '0',itemStyle: {color: 'rgb(216 153 151)'}},
            {yAxis:'0',xAxis: '110'}
          ],
          [
            {yAxis: '160', xAxis: '0',itemStyle: {color: 'rgb(232 196 153)'}},
            {yAxis:'0',xAxis: '100'}
          ],
          [
            {yAxis: '140', xAxis: '0',itemStyle: {color: 'rgb(160 203 154)'}},
            {yAxis:'0',xAxis: '90'}
          ],
          [
            {yAxis: '90', xAxis: '0',itemStyle: {color: 'rgb(160 196 228)'}},
            {yAxis:'0',xAxis: '60'}
          ],
        ]
      }
    },
  ]
};

const  commonChartRef = ref()
const highlightItem = (oldIndex: any, index: any) => {
  commonChartRef.value.dispatchAction({
    type: 'downplay',
    dataIndex: oldIndex
  })
  commonChartRef.value.dispatchAction({
    type: 'highlight',
    dataIndex: index
  })
}
onMounted(() => {
  commonChartRef.value.setOption(option)
})
defineExpose({
  highlightItem
})
</script>
<style lang="less" scoped>
.chart-container {
  color: #fff;
  border-radius: 3px;
  width:100%;
  // background-color: rgb(31 32 37);
  display: flex;
  .chart-container-title {
    width: 80px;
    padding: 16px 12px;
    text-align: right;
    font-size: 16px;
  }
  .chart-container-content {
    flex: 1;
  }
}
</style>
